<template>
  <div class="product-management">
    <!-- 农产品列表表格 -->
    <el-table :data="productList" style="width: 100%" @row-click="handleRowClick">
      <el-table-column prop="productName" label="商品名称" width="200" />
      <el-table-column prop="category" label="分类" width="150" />
      <el-table-column prop="price" label="商品价格" width="100" />
      <el-table-column prop="stock" label="库存" width="100" />
      <el-table-column prop="origin" label="产地" width="150" />
      <el-table-column prop="enterpriseName" label="企业名称" width="150" />
      <el-table-column prop="producerName" label="出品人姓名" width="150" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" link @click.stop="openDetailDialog(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情对话框 -->
    <el-dialog v-model="dialogVisible" title="农产品详情" width="600px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="商品名称">{{ currentProduct?.productName }}</el-descriptions-item>
        <el-descriptions-item label="分类">{{ currentProduct?.category }}</el-descriptions-item>
        <el-descriptions-item label="商品价格">{{ currentProduct?.price }}</el-descriptions-item>
        <el-descriptions-item label="库存">{{ currentProduct?.stock }}</el-descriptions-item>
        <el-descriptions-item label="产地">{{ currentProduct?.origin }}</el-descriptions-item>
        <el-descriptions-item label="企业名称">{{ currentProduct?.enterpriseName }}</el-descriptions-item>
        <el-descriptions-item label="出品人姓名">{{ currentProduct?.producerName }}</el-descriptions-item>
        <el-descriptions-item label="出品人手机号">{{ currentProduct?.producerPhone }}</el-descriptions-item>
        <el-descriptions-item label="商品图片">
          <el-image style="width: 100px; height: 60px" :src="currentProduct?.imageUrl"
            :preview-src-list="[currentProduct?.imageUrl || '']" fit="cover" />
        </el-descriptions-item>
        <el-descriptions-item label="商品折扣">{{ currentProduct?.discount || '无' }}</el-descriptions-item>
        <el-descriptions-item label="商品描述">{{ currentProduct?.description }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-popconfirm title="确定要通过该商品审核吗？" @confirm="handleApprove">
            <template #reference>
              <el-button type="success">通过审核</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus' // 引入 ElMessage

// 农产品数据接口
interface Product {
  id: number
  productName: string
  category: string
  price: number
  stock: number
  imageUrl: string
  discount?: string
  description: string
  origin: string
  enterpriseName: string
  producerName: string
  producerPhone: string
}

// 模拟农产品数据
const productList = ref<Product[]>([
  {
    id: 1,
    productName: '红富士苹果',
    category: '水果',
    price: 10.0,
    stock: 100,
    imageUrl: 'https://example.com/apple.jpg',
    discount: '8折',
    description: '新鲜多汁的红富士苹果',
    origin: '山东',
    enterpriseName: 'XX农业公司',
    producerName: '张三',
    producerPhone: '13800138000'
  },
  {
    id: 2,
    productName: '东北大米',
    category: '粮食',
    price: 50.0,
    stock: 200,
    imageUrl: 'https://example.com/rice.jpg',
    description: '优质东北大米',
    origin: '黑龙江',
    enterpriseName: 'YY粮食企业',
    producerName: '李四',
    producerPhone: '13900139000'
  }
])

// 当前选中的农产品
const currentProduct = ref<Product | null>(null)

// 控制详情对话框的显示
const dialogVisible = ref(false)

// 打开详情对话框
const openDetailDialog = (row: Product) => {
  currentProduct.value = row
  dialogVisible.value = true
}

// 处理通过审核
const handleApprove = () => {
  if (currentProduct.value) {
    // 这里可以添加实际的审核通过逻辑，比如调用 API
    productList.value = productList.value.filter(product => product.id !== currentProduct.value.id)
    dialogVisible.value = false
    ElMessage.success('商品审核通过')
  }
}

// 点击表格行事件
const handleRowClick = (row: Product) => {
  openDetailDialog(row)
}
</script>

<style scoped>
.product-management {
  padding: 20px;
}
</style>